<html>
    <head>
        <title>JSON <-> PHP Prototype</title>
        <script type="text/javascript">
            djConfig = { isDebug: true };
        </script>
        <script type="text/javascript" src="js/dojo.js"></script>
        <script type="text/javascript">
            dojo.require("dojo.io.*");
            dojo.require("dojo.json");
        </script>
        <script type="text/javascript" src="js/json.js"></script>
        <script>
            function test() {
                    var mycontent = {request: "comics"}.toJSONString();
                    var parameters = {
                        url: "data.php",
                        error: function(type, error) { alert("uh oh... " + error.toJSONString()); },
                        mimetype: "text/plain",
                        method: "post",
                        postContent: mycontent,
                        load: function(type, data, evt) {
                            result = data.parseJSON();
                            if (result.success) {
                              for (var i = 0; i < result.comics.length; ++i) {
                                var comic = result.comics[i];
                                document.getElementById("ajax1").innerHTML +=  "<h2>Comic from " + comic.date + '</h2><img src="' + comic.url + '"/>';
                              }
                            } else {
                              document.getElementById("ajax1").innerHTML = "Failed to get comics."
                            }
                        }
                    };
                    dojo.io.bind(parameters);
            }
        </script>
    </head>
    <body>
            <h1>JSON AJAX Test</h1>
            <p>Result:</p>
            <p id="ajax1">AJAX result will go here.</p>
            <input type="submit" value="Test" onClick="test()"/>
    </body>
</html>
